<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="page">
        <h1>欢迎登录硅谷甄选运营平台</h1>
        <el-form class="loginForm" :model="loginDto" :rules ref="ruleFormRef">
            <el-form-item prop="username">
                <el-input :prefix-icon="User" v-model="loginDto.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" type="password" show-password v-model="loginDto.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :loading class="loginBtn" type="primary" size="middle" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
    import { User, Lock } from '@element-plus/icons-vue'
    import { ElNotification } from 'element-plus';
    import { useRoute,useRouter } from 'vue-router';
    import useUserStore from '@/store/modules/user';
    import reqUser from '@/api/user';

    import { ref, reactive, onMounted, nextTick } from 'vue';

    let loading = ref(false);
    let loginDto = reactive({
        username: '',
        password: '',
    });
    let $route = useRoute();
    let $router = useRouter();
    let userStore = useUserStore();
    const ruleFormRef = ref();

    function passwordValidator(rule: any, value: any, callback: any) {
        if (value.length < 6) {
            callback(new Error('密码长度不能小于6位'));
        } else {
            callback()
        }
    };
    const rules = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min:2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: passwordValidator, trigger: 'blur' }
        ]
    }

    function login() {
        ruleFormRef.value.validate(async (valid: any) => {
            if (!valid) return

            loading.value = true;
            try {
                let res = await reqUser.reqUserLogin(loginDto);
                if(res.code == 200){
                    userStore.token = res.data||'';
                    localStorage.setItem('token',res.data||'');
                    ElNotification({message: '登录成功', type: 'success'});
                    let redirect = $route.query.redirect;
                    let path = redirect ? decodeURIComponent(redirect as string) : '/';
                    $router.push(path);
                }else{
                    ElNotification({message: res.data, type: 'error'});
                }
                loading.value = false;
            } catch (error) {
                ElNotification({message: (error as Error).message, type: 'error'});
                loading.value = false;
            }
        })
    }

    onMounted(() => {
        window.addEventListener('keyup', (e: any) => {
            if (e.code === 'Enter') {
                nextTick(()=>{
                    login();
                })
            }
        });
    });
</script>  

<style scoped lang="scss">
    .page{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        h1{
            color: lightskyblue;
            font-size: 30px;
        }

        .loginForm{
            width: 300px;
            margin-top: 30px;
        }

        .loginBtn{
            width: 100%;
        }
    }
</style>